<template>
  <div>
    <div style="margin: 30px 0">
      <a-input-search placeholder="请输入搜索名称" style="width: 200px;margin-right: 10px" enter-button @search="onSearch" />
      <a-button type="primary" @click="callingAdd" icon="plus">添加名片</a-button>
    </div>
    <a-modal v-if="calling" v-model="calling" :title="title" @ok="handleOk">
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="名称">
          <a-input
              v-decorator="['name', { rules: [{ required: true, message: '请填写用户名称' }], initialValue:this.list.name }]"
              placeholder="请填写用户名称"
              autocomplete="autocomplete"
          />
        </a-form-item>
        <a-form-item label="头像">
          <Upload />
        </a-form-item>
        <a-form-item label="电话">
          <a-input
              type="tel"
              v-decorator="['phone',{ rules: [{ required: true, message: '请填写用户电话' }], initialValue:this.list.phone }]"
              placeholder="请填写用户电话"
              autocomplete="autocomplete"
          />
        </a-form-item>
        <a-form-item label="职位">
          <a-input
              v-decorator="['position', { rules: [{ required: true, message: '请填写用户所在职位' }], initialValue:this.list.position }]"
              placeholder="请填写用户所在职位"
              autocomplete="autocomplete"
          />
        </a-form-item>
        <a-form-item label="地址">
          <a-input
              v-decorator="['address', { rules: [{ required: true, message: '请填写用户所在地址' }], initialValue:this.list.address }]"
              placeholder="请填写用户所在地址"
              autocomplete="autocomplete"
          />
        </a-form-item>
        <a-form-item label="简介">
          <a-textarea
              placeholder="请填写用户的个人简介"
              autocomplete="autocomplete"
              :rows="4"
              v-decorator="['introduction',{ initialValue:this.list.introduction }]"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-table
        :columns="columns"
        :data-source="data"
        :pagination="filterList"
        @change="handleChangeCurrent"
    >
      <!--   自定义头像   -->
      <div slot="avatar">
        <a-avatar src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqq.yh31.com%2Ftp%2Ffj%2F202108070936229961.jpg&refer=http%3A%2F%2Fqq.yh31.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645264093&t=a1aa77d9f51f9fe41801b1821d40c68f" :size="64"/>
      </div>
      <!-- 操作自定义样式 -->
      <div slot="action" slot-scope="text,record">
        <a-button type="primary" style="margin-right: 10px" @click="edit(record)" icon="edit">编辑</a-button>
        <a-button type="danger" icon="delete" @click="del(record.id)">删除</a-button>
      </div>
    </a-table>
  </div>
</template>

<script>
import { callingAdd, callingCard } from '@/services/photoList';
import Upload from './components/Upload';

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    align: 'center'
  },
  {
    title: '头像',
    dataIndex: 'avatar',
    key: 'avatar',
    align: 'center',
    scopedSlots: { customRender: 'avatar' }
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    ellipsis: true,
    align: 'center',
  },
  {
    title: '电话',
    dataIndex: 'phone',
    key: 'phone',
    align: 'center',
  },
  {
    title: '职位',
    dataIndex: 'position',
    key: 'position',
    ellipsis: true,
    align: 'center',
  },
  {
    title: '介绍',
    dataIndex: 'introduction',
    key: 'introduction',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
    ellipsis: true,
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'center',
    width: 210,
    scopedSlots: { customRender: 'action' }
  },
]
const data = []


export default {
  name: 'CallingCard',
  inject: ['reload'], //  刷新列表
  components: {
    Upload
  },
  data() {
    return {
      data,
      columns,
      //  获取到当前form值
      form: this.$form.createForm(this),
      //  modal 状态
      calling: false,
      loading: false,
      //  分页
      filterList: {
        total: 0,
        pageNo: 1,
      },
      list: {},
      filterUrl: []
    }
  },
  mounted() {
    this.callingCard()
  },
  methods: {
    callingCard() {
      const {pageNo} = this.filterList
      callingCard({ pageNo }).then(res=>{
        this.data = res.data.result.records || {}
        this.filterList.total = res.data.result.total || 1
        this.loading = false;
      })
    },
    //  搜索
    onSearch(value) {
      callingCard({name: value}).then(res=>{
        this.data = res.data.result.records || {}
        this.filterList.total = res.data.result.total || 0
        this.loading = false;
      })
    },
    //  添加名片
    callingAdd() {
      this.title = '添加名片'
      this.calling = true
    },
    //  修改名片
    edit(e) {
      this.title = '修改名片'
      this.list = e
      this.calling = true
      console.log(e)
    },
    //  删除名片
    del(e) {
      console.log(e)
    },
    //  确定的按钮
    handleOk(e) {
      e.preventDefault();
      if (this.title === '添加名片'){
        this.form.validateFields((err) => {
          let formData = new FormData()
          formData.append('name',this.form.getFieldValue('name'))
          formData.append('address',this.form.getFieldValue('address'))
          formData.append('introduction',this.form.getFieldValue('introduction'))
          formData.append('phone',this.form.getFieldValue('phone'))
          formData.append('position',this.form.getFieldValue('position'))
          formData.append('avatar',this.form.getFieldValue('avatar'))
          if (!err) {
            callingAdd(formData).then(res=>{
              console.log(res)
              this.$message.success(res.data.message)
              this.$emit('saleOk',false)
              this.reload()
            })
          }
          this.problem = true
        });
      }
      if (this.title === '修改名片'){
        this.form.validateFields((err,value) => {
          if (!err) {
            callingAdd(value).then(res=>{
              console.log(res)
              this.$message.success(res.data.message)
              this.$emit('saleOk',false)
              this.reload()
            })
          }
          this.problem = true
        });
      }
    },
    //  分页
    handleChangeCurrent(val) {
      this.filterList.pageNo = val.current
      this.callingCard()
    },
  }
};
</script>

<style scoped>

</style>
